<template>
  <view>
    <uv-popup closeable mode="center" ref="popup" @change="change">
      <view class="dialog">
        <view style="font-size: 18px">选择员工</view>
        <uv-input @tap="showSelectGroup" v-model="dept" disabled disabledColor="#ffffff" placeholder="请选择组别"></uv-input>
        <uv-input class="marginTB" v-model="user" placeholder="请输入人员"></uv-input>
        <uv-input v-model="workId" placeholder="请输入工号"></uv-input>
        <view class="header">
          <button @click="search" class="button">搜索</button>
          <button @click="reset" class="buttonRS">重置</button>
        </view>
      </view>
      <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scroll="scroll">
        <uni-table border stripe emptyText="暂无更多数据">
          <!-- 表头行 -->
          <uni-tr>
            <uni-th :width="70" align="center">组别</uni-th>
            <uni-th :width="60" align="center">姓名</uni-th>
            <uni-th :width="50" align="center">工号</uni-th>
          </uni-tr>
          <!-- 表格数据行 -->
          <uni-tr v-for="(item, index) in tableList" :key="index" @tap="currentRow(item)">
            <uni-td :class="{ active: item.isActive }">{{ item.deptName }}</uni-td>
            <uni-td :class="{ active: item.isActive }">{{ item.workName }}</uni-td>
            <uni-td :class="{ active: item.isActive }">{{ item.workId }}</uni-td>
          </uni-tr>
        </uni-table>
      </scroll-view>

      <uv-button class="btn" type="primary" text="确定" @click="confirm"></uv-button>
    </uv-popup>

    <uv-popup ref="popup2" @change="change" mode="bottom">
      <scroll-view :scroll-top="scrollTop2" scroll-y="true" class="scroll-Y" @scroll="scroll">
        <view v-for="item in groups" @click="confirmDept(item)" style="display: flex; justify-content: center; flex-direction: column; align-items: center">
          <text style="padding: 5px">{{ item.name }}</text>
          <uv-line></uv-line>
        </view>
      </scroll-view>
    </uv-popup>

    <uv-notify ref="notify" type="error"></uv-notify>
  </view>
</template>

<script>
export default {
  name: "user",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    searchObj: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      currentUserRow: {},
      dept: "",
      user: "",
      workId: "",
      scrollTop: 0,
      scrollTop2: 0,
      old: {
        scrollTop: 0,
        scrollTop2: 0,
      },
      tableList: [],
      number: "",
      groups: [],
    };
  },
  methods: {
    // 组别选择
    showSelectGroup() {
      this.$refs.popup2.open();
    },
    confirmDept(row) {
      this.dept = row.deptName + "  " + row.deptNo;
      this.$refs.popup2.close();
    },
    getGroupsList() {
      let token = uni.getStorageSync("token");
      console.log(token);
      uni.request({
        url: "/kl/pad/stitchDate/getAllDeptNameList",
        header: {
          Authorization: token, //自定义请求头信息
        },
        method: "GET",
        success: (res) => {
          console.log(res);
          if (res.data.code === 200) {
            for (let i = 0; i < res.data.data.list.length; i++) {
              res.data.data.list[i].name = res.data.data.list[i].deptName + "  " + res.data.data.list[i].deptNo;
            }
            this.groups = res.data.data.list;
          } else {
            this.$refs.notify.show({
              message: res.data.message,
            });
          }
        },
        fail: (err) => {
          console.log("请求失败", err);
        },
        complete: () => {
          console.log("请求完成");
        },
      });
    },

    scroll: function (e) {
      this.old.scrollTop = e.detail.scrollTop;
    },
    scroll2: function (e) {
      this.old.scrollTop2 = e.detail.scrollTop;
    },
    change(e) {
      console.log("弹窗状态改变：", e);
    },
    confirm() {
      console.log(this.currentUserRow);
      this.currentUserRow.deptName = this.dept.split("  ")[0];
      this.currentUserRow.deptNo = this.dept.split("  ")[1];
      uni.$emit("userInfo", JSON.stringify(this.currentUserRow));
      this.$props.show = false;
      this.$refs.popup.close();
    },
    search() {
      uni.request({
        url: "/kl/pad/stitchDate/getEmployeelList",
        header: {
          Authorization: uni.getStorageSync("token"), //自定义请求头信息
        },
        data: {
          deptNo: this.dept.split("  ")[1],
          workId: this.workId,
          workName: this.user,
        },
        method: "POST",
        success: (res) => {
          console.log(
            {
              deptNo: this.dept.split("  ")[1],
              workId: this.workId,
              workName: this.user,
            },
            res
          );
          if (res.data.code === 200) {
            for (var i = 0; i < res.data.data.list.length; i++) {
              res.data.data.list[i].isActive = false;
            }
            this.tableList = res.data.data.list;
          } else {
            this.$refs.notify.show({
              message: res.data.message,
            });
          }
        },
      });
    },

    reset() {
      this.dept = "";
      this.user = "";
      this.workId = "";
    },
    currentRow(item) {
      this.currentUserRow = item;
      for (var i = 0; i < this.tableList.length; i++) {
        this.tableList[i].isActive = false;
      }
      item.isActive = !item.isActive;
    },
  },

  watch: {
    show(newVal, oldVal) {
      this.dept = uni.getStorageSync("userInfo").departmentList[0].deptName + "  " + uni.getStorageSync("userInfo").departmentList[0].deptNo;
      uni.request({
        url: "/kl/pad/stitchDate/getEmployeelList",
        header: {
          Authorization: uni.getStorageSync("token"), //自定义请求头信息
        },
        data: this.searchObj,
        method: "POST",
        success: (res) => {
          console.log(res);
          if (res.data.code === 200) {
            for (var i = 0; i < res.data.data.list.length; i++) {
              res.data.data.list[i].isActive = false;
            }
            this.tableList = res.data.data.list;
          } else {
            this.$refs.notify.show({
              message: res.data.message,
            });
          }
        },
      });
      this.getGroupsList();
      this.$refs.popup.open("cneter");
    },
  },
};
</script>

<style>
.dialog {
  width: 500rpx;
  padding: 20rpx 30rpx 10rpx;
}

.header {
  margin-top: 10rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 26rpx;
}

::v-deep .uv-button {
  height: 40rpx;
}

h3 {
  margin-bottom: 10rpx;
}

.marginTB {
  margin: 10rpx 0;
}

.btn {
  margin: 30rpx;
}

.scroll-Y {
  height: 600rpx;
}

.scroll-view_H {
  white-space: nowrap;
  width: 100%;
}

.scroll-view-item {
  height: 600rpx;
  line-height: 600rpx;
  text-align: center;
  font-size: 36rpx;
}

.scroll-view-item_H {
  display: inline-block;
  width: 100%;
  height: 600rpx;
  line-height: 600rpx;
  text-align: center;
  font-size: 36rpx;
}

.active {
  background-color: #71bbff;
  line-height: 55rpx;
  color: #222 !important;
}
</style>
